<template>
    <div class="app-container">
        <div class="flex-head">
            <FormSearch
                ref="formSearchRef"
                :FormParams="queryParams"
                :FormRules="searchFormRules"
                :FormShow="showSearch"
                @submit="getList"
                @refresh="getList" />
        </div>
        <el-row class="mb20">
            <el-col :span="20">
                <el-button type="danger" :disabled="disabled" icon="Delete" @click="handleBatchDelete">批量下载</el-button>
            </el-col>
            <el-col :span="4">
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
            </el-col>
        </el-row>
        <TableBate
            id="tableBateId"
            ref="tableRef"
            :loading="loading"
            :TableHead="tableHead"
            :TableData="tableData"
            :TableAttrs="tableAttrs"
            @handleSelectionChange="handleSelectionChange"
            @handleActionBarEvent="handleActionBarEvent">
            <template #name="{ row }">
                <span>{{ row.touristList.map((item) => item.name).join('、') }}</span>
            </template>
            <template #status="{ row }">
                <template v-for="item in statusOptions">
                    <el-tag v-if="item.value == row.status" :type="item.elTagClass">{{ item.label }}</el-tag>
                </template>
            </template>
            <template #image="{ row }">
                <div>
                    <img v-if="row.payUrl" width="150" height="150" :src="row.payUrl" />
                    <div v-else></div>
                </div>
            </template>
        </TableBate>
    </div>
</template>
<script setup>
import FormSearch from '@/components/FormSearch/index.jsx'
import TableBate from '@/components/Table_Bate/index.jsx'
</script>
